<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="'测试'"
    :destroyOnClose="true"
    @ok="handleSubmit"
    @cancel="handelCancel"
  >
    <div class="h-full" v-if="iframeSrcDoc || iframeSrc">
      <iframe
        :src="iframeSrc"
        :srcdoc="iframeSrcDoc"
        :style="{ width: '100%', height: '100%', border: 'none' }"
      ></iframe>
    </div>
    <div class="h-full" v-if="markdownDoc">
      <MarkdownViewer
        :value="markdownDoc"
        :style="{ width: '100%', height: '100%', border: 'none' }"
      />
    </div>
    <div class="h-full" v-if="codeDoc">
      <CodeEditor
        :value="codeDoc"
        :readonly="true"
        :cm-options="{ mode: codeMode, theme: codeTheme }"
        :style="{ width: '100%', height: '100%', border: 'none' }"
      />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '../Modal';
  import { ref, toRaw } from 'vue';
  import MarkdownViewer from '@/components/Markdown/src/MarkdownViewer.vue';
  import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue';
  import { useAppInject } from '@/hooks/web/useAppInject';

  const { getIsMobile } = useAppInject();
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    modalTitle.value = toRaw(data.modalTitle);
    modalHeight.value = String(toRaw(data.modalHeight) | '')?.replace('px', '');
    fullScreen.value = toRaw(data.fullScreen);
    console.log(data);
    modalWidth.value = toRaw(data.modalWidth);
    iframeSrc.value = toRaw(data.iframeSrc);
    iframeSrcDoc.value = toRaw(data.iframeSrcDoc);
    markdownDoc.value = toRaw(data.markdownDoc);
    codeDoc.value = toRaw(data.codeDoc);
    codeMode.value = toRaw(data.codeMode);
    codeTheme.value = toRaw(data.codeTheme);
    setModalProps({
      confirmLoading: false,
      title: modalTitle.value,
      width: modalWidth.value,
      height: modalHeight.value == 0 ? 600 : modalHeight.value,
      minHeight: modalHeight.value,
      defaultFullscreen: fullScreen.value || getIsMobile.value,
      useWrapper: true,
      showOkBtn: false,
      cancelText: '关闭',
    });
  });
  const modalTitle = ref('Iframe Modal');
  const modalHeight = ref('500px');
  const modalWidth = ref('800px');
  const iframeSrc = ref('');
  const iframeSrcDoc = ref();
  const markdownDoc = ref();
  const codeDoc = ref();
  const codeMode = ref('javascript');
  const codeTheme = ref('github');
  const fullScreen = ref(false);

  function handelCancel() {
    closeModal();
  }

  async function handleSubmit() {
    setModalProps({ confirmLoading: false });
    closeModal();
  }
</script>
